<template>
  <div class="sider">
    <dl>
      <dt>个人中心</dt>
      <dd :class="[i === activeNumber ? 'active' : '']" v-for="(item, i) in data" :key="i">
        <router-link :to="item.link">{{item.title}}</router-link>
        <i class="iconfont icon-arrowright"></i>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  props: {
    activeNumber: Number,
    data: {
      type: Array,
      default () {
        return [
          {
            title: '我的信息',
            link: '/personal'
          },
          {
            title: '我的预约',
            link: '/personal/history'
          },
          {
            title: '我的家庭',
            link: '/personal/family'
          },
          {
            title: '我的快递',
            link: '/personal/myexpress'
          },
          {
            title: '修改密码',
            link: '/personal/modify-password'
          }
        ]
      }
    }
  }
}
</script>
